<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>工艺流程管理</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
      .organizeName,
      .operation span:first-of-type {
        color: #1990FF;
      }

      .operation span:last-of-type {
        color: #f5222d;
      }

      .pageNav {
        margin: 0 auto;
        width: fit-content;
      }

      .pageNav a,
      .operation span {
        cursor: pointer;
        display: inline-block;
      }

      cite {
        cursor: default;
      }

      .twoRow {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .layui-table tr td:nth-of-type(3) {
        min-width: 5em;
      }

      td
      {
          white-space: nowrap;
          text-align: center;
      }

        label{
            width: auto;
        }
    </style>
  </head>
  <body>
    <script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./js/jQuery.main.js"></script>
    <script src="./js/xm-select.js"></script>

    <form class="layui-form" action="" lay-filter="data">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label" style="width: auto !important;">搜索：</label>
          <input type="text" name="processName" class="layui-input" style="width: 14em;" placeholder="工序名称" value="">
        </div>
        <div class="layui-inline">
          <input type="text" name="workshop" class="layui-input" style="width: 10em;" placeholder="加工车间" value="">
        </div>
        <div class="layui-inline">
          <input type="text" id="processDept" name="processDept" class="layui-input" style="width: 8em;" placeholder="加工部门" value="" onclick="isAdminOfProcess()">
        </div>

<!--        <div class="layui-inline" style="width: 10em !important;">-->
<!--          <select name="projectStatus">-->
<!--            <option value=""></option>-->
<!--          </select>-->
<!--        </div>-->
        <div class="layui-inline">
          <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">查询流程</button>
        </div>
      </div>
    </form>

    <table  class="layui-table" lay-skin="line">
      <thead>
        <tr>
<!--          <th><input type="checkbox" id="select" onclick="selectAll()" /></th>-->
          <th style="text-align: center">工序名称</th>
          <th style="text-align: center">工序控制码</th>
          <th style="text-align: center">工作中心</th>
          <th style="text-align: center">加工部门</th>
          <th style="text-align: center">加工车间 </th>
          <th style="text-align: center">工序说明</th>
          <th style="text-align: center">耗材工序</th>
          <th style="text-align: center">操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div style="display: flex;">
<!--      <button type="button" class="layui-btn layui-btn-xs" style="background: #F5222D;" onclick="deleteProject()">批量删除</button>-->
      <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      var displayStart = 1;
      var endPage = null;
      var layer = layui.layer;
      var laydate = null;
      var form = null;
      var list = null;

      layui.use(['form', 'element', 'laydate'], function() {
        form = layui.form;
        laydate = layui.laydate;

        search(1);

        form.on('submit(searchBtn)', function() {
          search(1);
          return false;
        });
        $('.fristPage').click(function() {
          search(1);
          return false;
        });
        $('.lastPage').click(function() {
          search((displayStart > 1 ? displayStart - 1 : 1));
          return false;
        });
        $('.nextPage').click(function() {
          search((displayStart < endPage ? displayStart + 1 : endPage));
          return false;
        });
        $('.endPage').click(function() {
          search(endPage);
          return false;
        })
        // form.on('submit(changeBtn)', function() {
        //   var data = form.val('change');
        //   data.startTime = new Date(data.startTime).getTime();
        //   data.endTime = new Date(data.endTime).getTime();
        //   $.ajax({
        //     url: url + '/donation-project/saveOrUpdate',
        //     method: 'POST',
        //     contentType: 'application/json',
        //     data: JSON.stringify(data),
        //     success: function(res) {
        //       layer.alert(res.msg, {
        //         end: function() {
        //           layer.closeAll();
        //           search();
        //         }
        //       });
        //     }
        //   })
        //   return false;
        // });
      })

      // function selectAll() {
      //   $('input[type=checkbox]').each(function() {
      //     this.checked = $("#select")[0].checked
      //   })
      // }


      function isAdminOfProcess() {
          $.ajax({
              url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
              method: 'GET',
              contentType: 'application/json',
              success: function (res) {
                  if (res.code===200){
                  }
                  else if (res.code===400){
                      $('#processDept').attr('disabled','disabled');
                      layer.msg("非管理员只能查看本部门工序");
                  }
              }
          })
      }

      function processInfo(index) {
          layer.open({
              type: 1,
              skin: 'layui-layer',
              area: ['420px', '550px'],
              title: '工序详情信息',
              content: `
            <div class="layui-row layui-col-space10">
              <div style=" margin: 10px"></div>

                <label class="layui-form-label">工序名称：</label>
                <div class="layui-input-inline " style="width: 15em"  >
                <input id="processName" type="text" name="processName" placeholder="输入工序名称"  class="layui-input" style="width: 20em !important;" readonly="readonly">
                </div>

                <label class="layui-form-label">控制码：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="processCode" type="text" name="processCode" placeholder="输入工序控制码"  class="layui-input" style="margin: 10px 0; width: 20em !important;" readonly="readonly"></div>

                <label class="layui-form-label">工作中心：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="workCenter" type="text" name="workCenter" placeholder="输入工作中心"  class="layui-input" style="margin-bottom: 10px;width: 20em !important;" readonly="readonly"></div>

                <label class="layui-form-label">加工车间：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="workshop" type="text" name="workshop" placeholder="输入加工车间"  class="layui-input" style="width: 20em !important;" readonly="readonly"></div>

                <label class="layui-form-label" style="margin: 10px 0;">工序说明：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="processExplain" type="text" name="processExplain" placeholder="输入工序说明"  class="layui-input" style="margin: 10px; width: 20em !important;" readonly="readonly"></div>

                <label class="layui-form-label" style="margin: 10px 0;">可用机型：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="machineName" type="text" name="machineName" placeholder="输入可用机型"  class="layui-input" style=" width: 20em !important;" readonly="readonly"></div>

                 <div align="center" style="margin:30px 0">
                 <button class="layui-btn layui-btn-danger close" onclick="layer.closeAll()">关闭</button></div>
              </div>
            </div>
          `,

              success: function(){
                  $.ajax({
                      url: url + '/process-info/processInfo/'+index,
                      contentType: 'application/json',
                      async: false,
                      success: function(res) {
                          // form.val("data", res.data);
                          $('#processName').val(res.data.processName);
                          $('#processCode').val(res.data.processCode);
                          $('#workCenter').val(res.data.workCenter);
                          $('#workshop').val(res.data.workshop);
                          $('#processExplain').val(res.data.processExplain);
                          form.render();
                      }
                  })

                  $.ajax({
                      url: url + '/process-info/getMachine/'+index,
                      contentType: 'application/json',
                      async: false,
                      success: function(res) {
                          $('#machineName').val(res.data);
                      }
                  })
              }
          });

      }

      function edit(index) {
          var machineIds=[];
          var processDept;
          $.ajax({
              url: '/sys-user/getAdminLevel/'+sessionStorage.getItem('userId'),
              method: 'GET',
              contentType: 'application/json',
              success: function (res) {
                  if (res.code === 200) {
                      layer.open({
                          type: 1,
                          skin: 'layui-layer-rim',
                          area: ['420px', '520px'],
                          title: '编辑工序信息',
                          content: `
            <form class="layui-form" action="" lay-filter="change">
              <div style=" margin: 10px"></div>

                <input id="processId" type="text" name="id" style="display: none;">

                <label class="layui-form-label">工序名称：</label>
                <div class="layui-input-inline " style="width: 15em"  >
                <input id="processName" type="text" name="processName" placeholder="输入工序名称" lay-verify="required" class="layui-input" style="width: 18em !important;">
                </div>

                <label class="layui-form-label">控制码：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="processCode" type="text" name="processCode" placeholder="输入工序控制码" lay-verify="required" class="layui-input" style="margin: 10px 0; width: 18em !important;">
                </div>

                <label class="layui-form-label">工作中心：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="workCenter" type="text" name="workCenter" placeholder="输入工作中心" lay-verify="required" class="layui-input" style="margin-bottom: 10px;width: 18em !important;">
                </div>

                <label class="layui-form-label">加工车间：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="workshop" type="text" name="workshop" placeholder="输入加工车间" lay-verify="required" class="layui-input" style="width: 18em !important;">
                </div>

                <label class="layui-form-label" style="margin: 10px 0;">工序说明：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="processExplain" type="text" name="processExplain" placeholder="输入工序说明" lay-verify="required" class="layui-input" style="margin: 10px 0; width: 18em !important;">
                </div>

                <label class="layui-form-label">涉及机型：</label>
                <div class="layui-input-inline " style="width: 15em">
                   <div class="layui-input-inline" style="width: 7em;"><div id="machine" lay-filter="machine" style="width: 20em;"></div></div>
                </div>

                 <div align="center" style="margin:30px 0">
                 <button id="submit" type="submit" class="layui-btn" lay-submit="" lay-filter="changeBtn" >点击修改</button>
                 <button class="layui-btn layui-btn-danger">取消编辑</button></div>
              </div>
            </form>
          `,
                          success: function() {
                              $.ajax({
                                  url: url + '/process-info/getProcessInfoById/'+index,
                                  contentType: 'application/json',
                                  async: false,
                                  success: function(res) {
                                      $('#processId').val(res.data.id);
                                      $('#workCenter').val(res.data.workCenter);
                                      $('#processName').val(res.data.processName);
                                      $('#processExplain').val(res.data.processExplain);
                                      $('#processCode').val(res.data.processCode);
                                      $('#workshop').val(res.data.workshop);
                                      machineIds=res.data.machine.split(",");
                                      processDept=res.data.processDept
                                      form.render();
                                  }
                              })
                              //machine默认下拉框
                              var machineOption = {
                                  el: '#machine',
                                  name: 'machine',//表单的name属性
                                  filterable: true,
                                  id: 'reMachine',
                                  initValue: [ machineIds[0],machineIds[1],machineIds[2],machineIds[3],machineIds[4],machineIds[5],machineIds[6],machineIds[7],machineIds[8],
                                      machineIds[9],machineIds[10],machineIds[11],machineIds[12],machineIds[13],machineIds[14],machineIds[15],machineIds[16],machineIds[17],machineIds[18],
                                      machineIds[19],machineIds[20],machineIds[21],machineIds[22],machineIds[23],machineIds[24],machineIds[25],machineIds[26],machineIds[27],machineIds[28]
                                  ],//默认项
                                  // layVerify: 'required',//必填项
                                  //layVerType: 'tips',//提示类型 同layui
                                  tips: '请选择工序...',
                                  data: [],
                              };

                              var machine = xmSelect.render(machineOption)

                              setTimeout(function(){
                                  $.ajax({
                                      url: url + '/machine-info/listMachineType/'+processDept,
                                      async : false,
                                      contentType: 'application/json',
                                      success: function(res) {
                                          //data是ajax 异步获取的
                                          var data =[];
                                          for (var i = 0; i < res.data.length; i++) {
                                              data.push({
                                                  name : res.data[i].machineModel,
                                                  value :res.data[i].id
                                              });
                                          }
                                          //模拟通过ajax 获取json数据,异步更新多选下拉框的值
                                          machine.update({data: data})
                                      }
                                  })
                              },100);

                              form=layui.form;
                              form.render('select');
                          }
                      });
                  }else if(res.code===400){
                     layer.msg("权限不足!")
                  }
              }
          })

          form.on('submit(changeBtn)', function(data) {
              console.log("校验通过，准备提交");
              var data = form.val("change");
              console.log(data);
              $.ajax({
                  url: url + '/process-info/update',
                  method: 'POST',
                  contentType: 'application/json',
                  async: false,
                  data: JSON.stringify(data),
                  success: function(res) {
                      console.log(res);
                      if (res.code == 200) {
                          parent.layer.alert('保存编辑', {
                              end: function(){
                                  location.reload();
                              }
                          });
                      }
                  }
              })
              return false;
          })
      }


                  function deleteProcess(index) {
                      let confirm1=layer.confirm('您确定要删除这道工序吗？', {
                              btn: ['确定','取消']
                          },function () {
                              $.ajax({
                                  url: url + '/process-info/delete',
                                  method: 'POST',
                                  contentType: 'application/json',
                                  data: JSON.stringify({
                                      userId: sessionStorage.getItem('userId'),
                                      goalId: index
                                  }),
                                  success: function(res) {
                                      layer.msg(res.msg)
                                      if (res.code == 200) search();
                                  }
                              })
                              layer.close(confirm1);
                          },function (){
                              layer.close(confirm1);
                          }
                      )
                  }

                  function search(index) {
                      if (!index) var index = displayStart;
                      var data = form.val('data');
                      data.displayStart = index;
                      data.userId=sessionStorage.getItem('userId');
                      $.ajax({
                          url: url + '/process-info/list',
                          method: 'POST',
                          contentType: 'application/json',
                          data: JSON.stringify(data),
                          success: function(res) {
                              $('tbody').empty();
                              displayStart = res.data.current;
                              endPage = res.data.pages;
                              list = res.data.records;
                              for (var i = 0; i < res.data.records.length; i++) {
                                  $('tbody').append(
                                      "<tr>" +
                                      "<td class='organizeName'>" + res.data.records[i].processName + "</td>" +
                                      "<td>" + res.data.records[i].processCode+ "</td>" +
                                      "<td>" + res.data.records[i].workCenter + "</td>" +
                                      "<td>" + res.data.records[i].processDeptName + "</td>" +
                                      "<td>" + res.data.records[i].workshop + "</td>" +
                                      "<td>" + res.data.records[i].processExplain+ "</td>" +
                                      "<td>" + processStatus(res.data.records[i].consume)+ "</td>" +
                                      "<td class='operation'><button class='layui-btn layui-btn-normal layui-btn-sm' onclick='edit(" + res.data.records[i].id + ")'>编辑</button>　" +
                                      "<button class='layui-btn layui-btn-warm layui-btn-sm' onclick='processInfo(" + res.data.records[i].id + ")'>详情</button>　" +
                                      "<button class='layui-btn layui-btn-danger layui-btn-sm' onclick='deleteProcess(" + res.data.records[i].id + ")'>删除</button></td>" +
                                      "</tr>"
                                  );
                              }
                              $('#page').html(displayStart)
                          }
                      })
                  }
    </script>
  </body>
</html>
